import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import PropTypes from 'prop-types'
import {tools} from './js'
import navBackIcon from './static/icon_nav_back.png'
import './topbar.scss'

/**
 * @description：顶部导航自定义组件
 * @author huangkh
 */
class TopBar extends Component {

    constructor(props) {
        super(props)
    }

    shouldComponentUpdate(nextProps, nextState) {
        return false
    }

    render() {
        let safeAreaTop = tools.getSafeAreaTop()
        const { onBack ,pinkTheme} = this.props
        return (
            <View>
                <View className='topbar_container'>
                    <View  className='topbar_statusBar' style={{ height: safeAreaTop + 'px' }}>
                    </View>
                    <View className='topbar_navbar'>
                        <View className='topbar_naviView'>
                            {
                                this.props.hasBackIcon ?
                                    <View className='topbar_backView' hoverClass='raised' onClick={onBack ? onBack : this.naviBack.bind(this)}>
                                        <Image className='topbar_backIcon' src={navBackIcon}></Image>
                                    </View>
                                    :
                                    <View className='topbar_backView' ></View>
                            }
                            <View className='topbar_titleView'>
                                <Text className='topbar_titleText' style={{color:pinkTheme?'#FFF':'#4A4A4A'}}>{this.props.title}</Text>
                            </View>
                            <View className='topbar_emptyView'></View>
                        </View>
                    </View>
                </View>
                <View className='topbar_container_shadow'>
                    <View className='topbar_statusBar' style={{ height: safeAreaTop + 'px' }}>
                    </View>
                    <View className='topbar_navbar'>
                        <View className='topbar_naviView'>
                            <View className='topbar_backView' ></View>
                            <View className='topbar_titleView'>
                                <Text className='topbar_titleText' style={{color:pinkTheme?'#FFF':'#4A4A4A'}}></Text>
                            </View>
                            <View className='topbar_emptyView'></View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }

    @tools.cd()
    naviBack() {
        Taro.navigateBack({
            delta: 1
        })
    }
    
}

TopBar.propTypes = {
    title: PropTypes.string.isRequired,
    hasBackIcon: PropTypes.bool,
    pinkTheme: PropTypes.bool,
    showBorder: PropTypes.bool
}

TopBar.defaultProps = {
    title: '',
    hasBackIcon: false,
    pinkTheme: false,
    showBorder: true
}


export default TopBar 